<template> 
    <div class="teacher_card">
        <div class="teacher_info">
            <div class="teacher_item" v-for="(item,index) in avaTeacher2" :key="index">
                <div class="line_d3"></div>
                <div class="teacher_img">
                    <img :src='item.teacheravatar?imgBaseUrl+item.teacheravatar:imgBaseUrl+defaultavatar'>
                </div>
                <div class="teacher_name">
                    {{item.nickname}}
                </div>
                <div class="teacher_intro">
                    教学经验：{{item.experience}}年 
                    <!-- {{item.introduceen}} -->
                </div>
                <el-row>
                    <el-button @click="introduceTeacher(item.infocard)" style="width:100px;" plain type="info">介绍老师</el-button>
                    <el-button @click="teacherVedio(item.introducevideo)" style="width:100px;" plain type="info">视频</el-button>
                </el-row>
                <el-row>
                    <el-button plain type="danger" @click="reserveTeacher(item.id)">预约老师</el-button>
                </el-row>


                <!-- 介绍老师 -->
                <el-dialog title="老师介绍" 
                    width='40%'
                    :modal=false
                    :visible.sync="dialogFormVisible1">
                    <div>
                        <img :src="imgBaseUrl+infocard">
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button class="dialog_close" @click="dialogFormVisible1=false">取 消</el-button>
                        <el-button class="dialog_confirm" type="primary" @click="dialogFormVisible1=false">确 定</el-button>
                    </div>
                </el-dialog>

                <!-- 老师视频 -->
                <el-dialog title="老师视频" 
                    width='40%'
                    :modal=false
                    :visible.sync="dialogFormVisible6">
                    <div>
                        <video :src='imgBaseUrl+introducevideo' controls="controls" width="800px" height="600px"></video>
                    </div>
                    <div slot="footer" class="dialog-footer">
                        <el-button class="dialog_close" @click="dialogFormVisible6=false">取 消</el-button>
                        <el-button class="dialog_confirm" type="primary" @click="dialogFormVisible6=false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>

         <!-- 预约老师 -->
        <el-dialog title="确认约课信息" 
            width='40%'
            :close-on-click-modal=false
            :modal=false
            :visible.sync="dialogFormVisible2">
            <full-calendar :events.sync="events" :config="config" ref="calendar" v-if="dialogFormVisible2"></full-calendar>
            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible2=false">取 消</el-button>
                <el-button class="dialog_confirm" type="primary" @click="confirmReserve">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 确认约课信息 -->
         <el-dialog title="确认信息" 
            width='30%'
            :modal=false
            :close-on-click-modal=false
            :visible.sync="dialogFormVisible3">
            <el-form :model="confirm">
                <el-form-item label="代理商:" :label-width="formLabelWidth">
                    <div>{{confirmInfo.agentname}}</div>   
                </el-form-item>
                <el-form-item label="老师:" :label-width="formLabelWidth">
                    <div>{{confirmInfo.teachername}}</div>
                </el-form-item>
                <el-form-item label="上课时间:" :label-width="formLabelWidth">
                    <div>{{confirmInfo.coursetime}}</div>
                </el-form-item>
                <el-form-item label="上课教材:" :label-width="formLabelWidth">
                    <div>{{confirmInfo.courseware}}</div>
                </el-form-item>
                 <el-form-item label="上课工具:" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.classtool">
                        <el-radio v-for="(tool,gj) in form.classTool" :key='gj' 
                        :label="tool.attriid">{{tool.attriname}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="填写号码:" :label-width="formLabelWidth">
                    <el-input class="divided_2" v-model='confirm.classtoolnum'></el-input>
                </el-form-item>
                <el-form-item label="上课留言:" :label-width="formLabelWidth">
                    <el-input class="divided_2" v-model="confirm.ordermsg" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="dialog_close" @click="dialogFormVisible3=false">取 消</el-button>
                <el-button class="dialog_confirm" :disabled="sureOnce" type="primary" @click="confirmReserve">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import base from '../api/base.js'
import {formatDate} from '../../static/js/date.js'
import moment,{ now } from 'moment'
export default {
    props:[
        'avaTeacher2','form'
    ],
    data(){
        return{
            sureOnce:false,
            defaultavatar:"../../static/imgs/linshi.png",
            infocard:'',
            introducevideo:'',
            align:'center',
            columWidth:200,
            formLabelWidth: '160px',
            teacherid:'',
            courseid:'',
            orderdetail:[],
            // courseList:[],
            confirmInfo:{},//确认信息
            imgBaseUrl:'http://www.ehailuo.com/',
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            dialogFormVisible3:false,
            dialogFormVisible6:false,
            teacherName:'',
            totalNum:"",
            confirm:{
                classtoolnum:'',
                ordermsg:''
            },
            totalCount:0,
            // 分页数据
            currentPage: 1,
            cur_page:1,
            page_size:10,
            // 日历数据
            events:[],
            // 学期起始时间
            semesterStart:'',
            semesterEnd:'',
            // 日历配置
            config:{
                header:{
                    left:'prev,next today',
                    center:'title',
                    right:''
                },
                defaultDate:new Date(),
                editable:false,
                selectHelper:false,
                defaultView: 'agendaWeek',
                allDaySlot:false,
                timeFormat:'HH:mm',
                slotLabelFormat:'HH:mm',
                slotDuration:'1:00:00',
                locale:'zh-cn',
                eventClick: (event) => {
                    this.reserveClass(event.classid)
                },
                validRange:(nowDate)=>{
                    console.log(nowDate)
                    // 判断7天后是否在学期内
                    var endDate=new Date().getTime()+7*86400*1000>this.semesterEnd*1000?this.semesterEnd:nowDate.clone().add(7*86400, 'seconds') 
                     return {
                        start:nowDate.clone().subtract(1,'days'),
                        end:endDate 
                    };
                },
            }
        }
    },
    methods:{
         handleCurrentChange(val) {
            this.cur_page=val;
            this.getTeacherCourse();
        },
        reserveTeacher(id){
            this.teacherid=id
            this.getTeacherCourse()
            this.dialogFormVisible2=true
        },
        getTeacherCourse(){
            this.$axios({
                url: base.baseUrl+"/school/course/get-teacher-course-list",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                    teacherid:this.teacherid,
                    // pagenum:this.cur_page,
                    // pagesize:this.page_size,
                    isscatter:1,
                    startdate:this.form.startdate,
                    enddate:this.form.enddate?this.form.enddate:moment(new Date()).add(7*86400, 'seconds').format('YYYY-MM-DD HH:mm:ss')
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.data.code==-1){
                    this.alertTip(res.data.msg)
                }else if(res.data.code==200){
                    // this.courseList=res.data.data.courselist;
                    this.totalCount=Number((res.data.data).pages.total_count);
                    this.config.defaultDate=this.form.startdate
                    this.events=res.data.data.courselist
                    this.events.forEach((el)=>{
                        el.start=new Date(el.starttime*1000);
                        el.end=new Date(el.endtime*1000);
                        el.title='点击预约',
                        el.color='rgb(255,74,96)'
                    })
                }else if(res.data.code==-2){
                    this.$router.push('/login')
                }
            });
        },
        introduceTeacher(cd){
            this.infocard=cd
            this.dialogFormVisible1=true
        },
        teacherVedio(mv){
            this.introducevideo=mv
            this.dialogFormVisible6=true
        },
        // 約課
        reserveClass(cid){
            
            this.courseid=cid
            this.sureOnce=false
            this.confirm.classtoolnum='',
            this.confirm.ordermsg=''
            this.dialogFormVisible3=true
            this.$axios({
                url: base.baseUrl+"/school/course/single-order-info",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                    courseid:this.courseid,
                    // coursewareid:7218
                    coursewareid:this.form.coursewareid
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.data.code==-1){
                    this.alertTip(res.data.msg)
                }else if(res.data.code==200){
                    this.confirmInfo=res.data.data
                }else if(res.data.code==-2){
                    this.$router.push('/login')
                }
            });
        },
        // 确定约课
        confirmReserve(){
            if(this.form.ischangeid==true){
               this.changeReserve()
            }else{
                this.commonReserve()
            }       
        },
        commonReserve(){
            this.sureOnce=true
            this.$axios({
                url: base.baseUrl+"/school/course/order-normal-course",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                    classid:this.form.classid,
                    isscatter:1,
                    coursewareid:this.form.coursewareid,
                    courseid:this.courseid,
                    classtool:this.form.classtool,
                    classtoolnum:this.confirm.classtoolnum,
                    ordermsg:this.confirm.ordermsg
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.status==500){
                    this.alertTip('服务器出错')
                }else{
                    if(res.data.code==-1){
                        this.alertTip(res.data.msg)
                        this.sureOnce=false
                    }else if(res.data.code==200){
                        this.openTip()
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                }
            });
        },
        changeReserve(){
            this.sureOnce=true
            this.$axios({
                url: base.baseUrl+"/school/course/revise-course",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                    changeid:this.form.changeid,
                    coursewareid:this.form.coursewareid,
                    courseid:this.courseid,
                    classtool:this.form.classtool,
                    classtoolaccount:this.confirm.classtoolnum,
                    ordermsg:this.confirm.ordermsg
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.status==500){
                    this.alertTip('服务器出错')
                }else{
                    if(res.data.code==-1){
                        this.sureOnce=false
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        this.openTip()
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                }
            });
        },
        openTip(){
            this.$confirm('约课成功', '提示', {
                confirmButtonText: '确定',
                // cancelButtonText: '取消',
            }).then(() => {
                this.dialogFormVisible2=false
                this.dialogFormVisible3=false
                this.$emit('changeDia')  
                this.$router.push('/formalTable')
            })
        },
        alertTip(msg){
            this.$alert(msg, '提示', {
                confirmButtonText: '确定',
                // callback: action => {
                //     this.$message({
                //         type: 'info',
                //     });
                // }
            });
        },
        // 获取学期起始时间
        getSemesterDuration(){
            this.$axios({
                url: base.baseUrl+"/school/agent/get-term-info",
                method: "POST",
                header: { 'content-type': 'application/x-www-form-urlencoded' },
                data:{
                    token:localStorage.token,
                },
                transformRequest: [function (data) {
                    let ret = ''
                    for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret
                }],
            }).then(res => {
                if(res.status==500){
                    this.alertTip('服务器出错')
                }else{
                    if(res.data.code==-1){
                        this.alertTip(res.data.msg)
                    }else if(res.data.code==200){
                        this.semesterStart=res.data.data.starttime                        
                        this.semesterEnd=res.data.data.endtime                        
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                }
            });
        }
    },
    filters:{
        transData(time){
            return formatDate(new Date(time * 1000), 'yyyy-MM-dd hh:mm');
        },
        getWeek(txData){
            let tData=formatDate(new Date(txData * 1000), 'yyyy-MM-dd hh:mm')
            const days = ['日', '一', '二', '三', '四', '五', '六'];
            let dateT = tData ? new Date(tData) : new Date();    
            return `星期${days[dateT.getDay()]}`;
        }
    },
    created(){
        // 调用获取学期方法
        this.getSemesterDuration()
    },
    computed:{
        eventSources() {
        const self = this;
      return [
        {
          events(start, end, timezone, callback) {
            setTimeout(() => {
              callback(self.events.filter(() => Math.random() > 0.5));
            }, 1000);
          },
        },
      ];
    },
    }
}
</script>

<style lang="less" scoped>
.el-form-item__label,.el-form-item__content{
    font-size: 16px;
    font-family: 黑体;
}
    .teacher_card{
        .teacher_info{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            .teacher_item{
                width: 360px;
                background-color: #ffffff;
                border-radius: 7px;
                box-shadow: 0px 0px 11px 0px 
                rgba(0, 0, 0, 0.19);
                text-align: center;
                padding-bottom: 60px;
                margin-bottom: 20px;
                .line_d3{
                    width: 100%;
                    height: 120px;
                    border-radius: 7px 7px 0 0;
                    background-color: #d3d3d3;
                }
                .teacher_img{ 
                    // background: #ff5263;
                    margin-top: -70px;
                    // position: relative;
                    // top:-70px; 
                    // margin: 0 auto;
                    img{
                        width: 140px;
                        height: 140px;
                        border: solid 10px #ffffff;
                        border-radius: 100px;
                    }
                }
                .teacher_name{
                    font-size: 24px;
                    line-height: 36px;
                    color: #4d4d4d;
                }
                .teacher_intro{
                    font-size: 16px;
                    line-height: 32px;
                    color: #999999;
                }
                button{
                    width: 200px;
                    font-size: 16px;
                    margin: 5px 0;
                }
            }
        }
    }
    .tInfo{
        line-height: 56px;
    }
    .tInfo,.tInfo1{
        font-size: 16px;
        margin-left: 8px;
    }
</style>

